<!DOCTYPE html>
<html lang="en" style="font-size: 13.33vw">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no" name="viewport">
	<title>Index</title>
	<style>
		* {
			margin  : 0;
			padding : 0
		}
		body {
			overflow : hidden;
		}
		.wrapper {
			position   : fixed;
			width      : 100vw;
			height     : 100vh;
			left       : 0;
			top        : 0;
			background : antiquewhite;
			overflow   : scroll;
		}
		#box {
			overflow : hidden;
			width    : auto;
			position : fixed;
			left     : 0;
			bottom   : 0;
			width    : 26.44rem;
			height   : 3.26rem;
		}
		.grass {
			width    : 26.44rem;
			height   : 3.26rem;
			position : absolute;
			float    : left;
		}
		.btns {
			width           : 7.50rem;
			height          : 2rem;
			display         : flex;
			flex-flow       : row wrap;
			justify-content : space-evenly;
			align-items     : center;
		}
		.section {
			display       : block;
			font-size     : 0.30rem;
			border        : 1px solid #ff3600;
			width         : 1.3rem;
			height        : 0.60rem;
			line-height   : 0.60rem;
			text-align    : center;
			border-radius : 0.10rem;
			cursor        : pointer;
		}
	</style>
</head>
<body>
<div class="wrapper">
	<div id="box">
		<img alt="" class="grass" id="grass" src="./grass.png">
	</div>
	<div class="btns">
		<div class="section">开始</div>
		<div class="section">暂停</div>
		<div class="section">速度++</div>
		<div class="section">间隔--</div>
		<div class="section">转向</div>

	</div>
</div>
<script src="jquery.min.js"></script>
<script>

	var scrollAnimation = function (options) {

		var defaults = {
			element      : options.element ? options.element : "#box",//默认父容器 ID Classs
			time         : options.time ? options.time : 20,//默认时间间隔
			speed        : options.speed ? options.speed : 4,//默认滚动速度
			direction    : options.direction ? options.direction : "left", //left right
			documentWidth: options.documentWidth ? options.documentWidth : "",//private
			windowWidth  : options.windowWidth ? options.windowWidth : document.body.clientWidth,//private
			deadline     : options.deadline ? options.deadline : '',//private
			interval     : options.interval ? options.interval : ''//private
		}
		this.options = $.extend(defaults, options);
		this.options.documentWidth = $(this.options.element).width()
		this.options.deadline = this.options.documentWidth - this.options.windowWidth
		this.options.html = $(this.options.element).html()
		this.init = (() => {
			var k = this.options.direction == "left" ? 1 : -1
			console.log(k);
			this.distance = 0;
			$(this.options.element).append(this.options.html)
			$($(this.options.element).children()[0]).css({
				"position": "absolute",
				"top"     : "0",
				"left"    : "0"
			})
			$($(this.options.element).children()[1]).css({
				"position": "absolute",
				"top"     : "0",
				"left"    : this.options.documentWidth * k
			})

		})()
		this.start = () => {
			this.distance = this.distance ? this.distance : 0;
			var k = this.options.direction == "left" ? 1 : -1
			if (this.options.interval) this.stop()
			this.options.interval = setInterval(() => {
				this.distance += this.options.speed * k
				$($(this.options.element).children()[0]).css({
					'left': -this.distance
				})
				$($(this.options.element).children()[1]).css({
					'left': -this.distance + this.options.documentWidth * k
				})
				if (this.distance * k > this.options.documentWidth) {
					this.distance = 0
					$($(this.options.element).children()[0]).remove()
					$(this.options.element).append(this.options.html)
				}
			}, this.options.time)
			return this;
		}
		this.stop = () => {
			console.log(this);
			clearInterval(this.options.interval)
			return this;
		}
		return this;
	}


	$(function () {
		var scroll = new scrollAnimation({
			element  : "#box",//默认父容器 ID Classs
			speed    : 4,
			time     : 20,
			direction: 'left'
		})


		$(".section:eq(0)").click(() => {
			scroll.start()
			console.log("scroll.start()");
		})
		$(".section:eq(1)").click(() => {
			scroll.stop()
			console.log("scroll.stop() 1");
		})
		$(".section:eq(2)").click(() => {
			scroll.options.speed = scroll.options.speed + 1
			console.log(`speed now is ${scroll.options.speed}`);
		})
		$(".section:eq(3)").click(() => {
			if (scroll.options.time)
				scroll.options.time = scroll.options.time - 1
			console.log(`time now is ${scroll.options.time}`);

		})
		$(".section:eq(4)").click(() => {
			console.log(scroll.options.direction);
			if (scroll.options.direction == 'left') {
				scroll.options.direction = 'right'
			} else {
				scroll.options.direction = 'left'
			}
			scroll.stop()
			scroll.start()
			console.log(scroll.options.direction);
		})


	})
</script>


</body>
</html>